import { Task } from './api';

import { Card, ListItem, CheckBox, Icon, Button } from '@rneui/base';
import { Text } from 'react-native';


export const TodoItem =({item,doneHandle,deleteHandle}:{item:Task,doneHandle:(task:Task)=>void,
  deleteHandle:(task:Task)=>void})=>{
  return (<ListItem.Swipeable bottomDivider
                              rightContent={(reset) => (
                                <Button
                                  title="Delete"
                                  onPress={() => deleteHandle(item)}
                                  icon={{ name: 'delete', color: 'white' }}
                                  buttonStyle={{ minHeight: '100%', backgroundColor: 'red' }}
                                />
                              )}
  >
    <ListItem.CheckBox
      // Use ThemeProvider to change the defaults of the checkbox
      iconType="material-community"
      checkedIcon="checkbox-marked"
      uncheckedIcon="checkbox-blank-outline"
      checked={item.done}
      onPress={() => doneHandle(item)}
    />
    <ListItem.Content>
      <ListItem.Title>{item.title}</ListItem.Title>

    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem.Swipeable>)
}

export const Todo = ({item,doneHandle}:{item:Task,doneHandle:(task:Task)=>void}) => {
  return (
    <Card >
      <Card.Title onPress={()=>doneHandle(item)}>{item.title}</Card.Title>
      <Card.Divider />
      <Text style={{ marginBottom: 10 }}>
        {item.done?'完成':'未完成'}
      </Text>




      <Icon
      color="#0CC"
      containerStyle={{}}
      disabledStyle={{}}
      iconProps={{}}
      iconStyle={{}}
      name="devices"
      onLongPress={() => console.log("onLongPress()")}
      onPress={() => console.log("onPress()")}
      size={40}
      type="material"
    />

      <CheckBox
        checked={item.done}
        onPress={() => doneHandle(item)}
        checkedIcon="dot-circle-o"
        uncheckedIcon="circle-o"
      />
    </Card>
  );
};
